<template>
    <div id="rightcont1">
        <div class="layui-tab layui-tab-brief tuijian">
            <ul class="layui-tab-title class=Tabtitle">
                <li class="layui-this"><b>全部推荐</b></li>
                <li><b><i class="el-icon-s-custom"></i>推荐作者</b></li>
                <li class=" hidden-xs-only"><b><i class="el-icon-menu"></i>推荐专题</b></li>
            </ul>
            <div class="layui-tab-content">
                <!--                推荐内容-->
                <div class="layui-tab-item layui-show">
                    <div v-for="(index,i) in goods" :key="i" v-show="i<goods1index">
                        <el-row class="yd-tjzhuanti">
                            <el-col :span="24">
                                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                            </el-col>
                            <el-col :xs="24" class="hidden-sm-and-up">
                                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                            </el-col>
                            <el-col :span="16" :xs="13">
                                <el-col :span="4" :xs="14" :style="Pstyle1">
                                    <img :style="Imgborder" :src="index.picInfo[0] && index.picInfo[0].url">
                                </el-col>
                                <el-col :span="20" :xs="10" :style="Pstyle">
                                    <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                                    <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                                    <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                                            class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                                    </router-link>
                                </el-col>
                            </el-col>
                            <!--关注按钮-->
                            <el-col :span="6" :xs="9" :offset="2">
                                <button class="guanzhuBtn"
                                        style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                        v-show="index.tag" @click="changeCase(i)">
                                    +关注
                                </button>
                                <div class="yiguanzhuBtn" v-show="!index.tag">
                                    <button style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                        <i class="el-icon-check"></i>已关注
                                    </button>
                                    <button class="qxguanzhuBtn" style="cursor: pointer" @click="changeCase(i)">
                                        取消关注
                                    </button>
                                </div>
                            </el-col>
                            <!--移动-->
                            <el-col :span="24" class="hidden-sm-and-up">
                                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                                <p :style="fontStyle">{{index.digest}}</p>
                                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                                    2363.7K人关注 / {{index.ptime}}</i>
                                </router-link>
                            </el-col>
                        </el-row>
                    </div>
                    <button style="cursor: pointer" class="yueduBtn" v-if="IsShow5" @click="Switchs5">阅读更多...</button>
                    <button style="background-color: #e6e6e6;color: #969696;cursor: pointer" class="yueduBtn" v-else>...没有更多</button>
                </div>
                <!--                推荐作者-->
                <div class="layui-tab-item">
                    <div v-for="(index,o) in goods2" v-show="o<goods2index">
                        <el-row class="yd-tjzhuanti">
                            <el-col :span="24">
                                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                            </el-col>
                            <el-col :xs="24" class="hidden-sm-and-up">
                                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                            </el-col>
                            <el-col :span="16" :xs="13">
                                <el-col :span="4" :xs="14" :style="Pstyle1">
                                    <img :style="Imgborder" :src="index.picInfo[0] && index.picInfo[0].url">
                                </el-col>
                                <el-col :span="20" :xs="10" :style="Pstyle">
                                    <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                                    <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                                    <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                                            class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                                    </router-link>
                                </el-col>
                            </el-col>
                            <!--关注按钮-->
                            <el-col :span="6" :xs="9" :offset="2">
                                <button class="guanzhuBtn"
                                        style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                        v-show="index.tag" @click="changeCase2(o)">
                                    +关注
                                </button>
                                <div class="yiguanzhuBtn" v-show="!index.tag">
                                    <button style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                        <i class="el-icon-check"></i>已关注
                                    </button>
                                    <button class="qxguanzhuBtn" style="cursor: pointer" @click="changeCase2(o)">
                                        取消关注
                                    </button>
                                </div>
                            </el-col>
                            <!--移动-->
                            <el-col :span="24" class="hidden-sm-and-up">
                                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                                <p :style="fontStyle">{{index.digest}}</p>
                                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                                    2363.7K人关注 / {{index.ptime}}</i>
                                </router-link>
                            </el-col>
                        </el-row>
                    </div>
                    <button style="cursor: pointer" class="yueduBtn" v-if="IsShow5" @click="Switchs2">阅读更多...</button>
                    <button style="background-color: #e6e6e6;color: #969696;cursor: pointer" class="yueduBtn" v-else>...没有更多</button>
                </div>
                <!--                推荐专题-->
                <div class="layui-tab-item">
                    <div v-for="(index,s) in goods3" v-show="s<goods2index">
                        <el-row class="yd-tjzhuanti">
                            <el-col :span="24">
                                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                            </el-col>
                            <el-col :xs="24" class="hidden-sm-and-up">
                                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                            </el-col>
                            <el-col :span="16" :xs="13">
                                <el-col :span="4" :xs="14" :style="Pstyle1">
                                    <img :style="Imgborder" :src="index.picInfo[0] && index.picInfo[0].url">
                                </el-col>
                                <el-col :span="20" :xs="10" :style="Pstyle">
                                    <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                                    <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                                    <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                                            class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                                    </router-link>
                                </el-col>
                            </el-col>
                            <!--关注按钮-->
                            <el-col :span="6" :xs="9" :offset="2">
                                <button class="guanzhuBtn"
                                        style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                        v-show="index.tag" @click="changeCase3(s)">
                                    +关注
                                </button>
                                <div class="yiguanzhuBtn" v-show="!index.tag">
                                    <button style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                        <i class="el-icon-check"></i>已关注
                                    </button>
                                    <button class="qxguanzhuBtn" style="cursor: pointer" @click="changeCase3(s)">
                                        取消关注
                                    </button>
                                </div>
                            </el-col>
                            <!--移动-->
                            <el-col :span="24" class="hidden-sm-and-up">
                                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                                <p :style="fontStyle">{{index.digest}}</p>
                                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                                    2363.7K人关注 / {{index.ptime}}</i>
                                </router-link>
                            </el-col>
                        </el-row>
                    </div>
                    <button style="cursor: pointer" class="yueduBtn" v-if="IsShow5" @click="Switchs2">阅读更多...</button>
                    <button style="background-color: #e6e6e6;color: #969696;cursor: pointer" class="yueduBtn" v-else>...没有更多</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'rightcont1',
        data() {
            return {
                goods: [],
                goods2: '',
                goods3: '',
                IsShow5: true,
                i: -1,
                flag: 1,
                flag2: 1,
                fontStyle: {
                    fontSize: '12px',
                    color: '#969696'
                },
                Imgborder: {
                    borderRadius: '5px',
                    width: '52px',
                    height: '52px'
                },
                Pstyle: {
                    lineHeight: '28px'
                },
                Pstyle1: {
                    lineHeight: '58px',
                },
                Pstyle2: {
                    margin: '10px 0 10px 0',
                    fontSize: '12px',
                    color: '#ec6e56'
                },
                readMore: {
                    width: '100%',
                    backgroundColor: '#a5a5a5',
                    color: '#fff',
                    fontSize: '15px',
                    border: '0',
                    borderRadius: '50px',
                    margin: '30px 0 30px 0',
                    padding: ' 8px 0 8px 0'
                }
            }
        },
        methods: {
            Switchs5() {
                if (this.flag === 4) {
                    this.IsShow5 = !this.IsShow5
                    return
                }
                this.flag += 1
                // console.log(this.flag)
            },
            Switchs2() {
                if (this.flag2 === 2) {
                    this.IsShow5 = !this.IsShow5
                    return
                }
                this.flag2 += 1
                // console.log(this.flag)
            },
            changeCase(i) {
                this.goods[i].tag = !this.goods[i].tag;
            },
            changeCase2(o) {
                this.goods2[o].tag = !this.goods2[o].tag;
            },
            changeCase3(s) {
                this.goods3[s].tag = !this.goods3[s].tag;
            },
            kaishi() {
                // 调用API获取数组 https://www.apiopen.top/journalismApi
                this.axios.get('/moock/news.json').then((response) => {
                    console.log(response)
                    this.goods = response.data.data.toutiao;
                    // console.log(this.goods);
                    this.goods2 = response.data.data.ent;
                    this.goods3 = response.data.data.sports;
                    /* 给所取api内容字段tag设置true/false,来实现关注按钮切换 */
                    // for ( let i = 0; i < this.goods.length; i++) {
                    //     this.goods[i].tag = true;
                        // console.log(!this.goods[i].tag)
                    // }
                    // ;
                    // for ( let o = 0; o < this.goods2.length; o++) {
                    //     this.goods2[o].tag = true;
                        // console.log(!this.goods[i].tag)
                    // }
                    // ;
                    // for ( let s = 0; s < this.goods3.length; s++) {
                    //     this.goods3[s].tag = true;
                        // console.log(!this.goods[i].tag)
                    // }
                    // ;

                })
            }
        },
        mounted: function () {
            this.kaishi();
        },
        computed: {
            goods1index() {
                if (this.flag === 1) {
                    return 8
                } else if (this.flag === 2) {
                    return 10
                } else if (this.flag === 3) {
                    return 12
                } else if (this.flag === 4) {
                    return 15
                }
            },
            goods2index() {
                if (this.flag2 === 1) {
                    return 6
                } else if (this.flag2 === 2) {
                    return 8
                }
            }
        }
    }
</script>

<style scoped>
    #rightcont1 .tuijian li {
        font-size: 15px;
        font-weight: 900;
        /*line-height: 25px;*/
    }

    #rightcont1 h2 {
        color: #333333;
        font-size: 15px;
        font-weight: 700;
    }

    .yd-tjzhuanti {
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .guanzhuBtn:hover {
        background-color: #42c02e !important;
        color: #fff !important;
    }

    .yiguanzhuBtn {
        width: 98px;
        z-index: 55;
    }

    .qxguanzhuBtn {
        position: absolute;
        margin-top: -34px;
        border-radius: 50px;
        padding: 7px 20px 7px 20px;
        width: 98px;
        border: 1px solid #b3b3b3;
        background-color: #f0f9eb !important;
        color: #969696;
        display: none
    }

    .yiguanzhuBtn:hover .qxguanzhuBtn {
        display: block;
    }

    .yueduBtn {
        margin: 30px 0 30px 10px;
        width: 100%;
        height: 40px;
        color: #fff;
        border: 0;
        border-radius: 20px;
        background-color: #a5a5a5
    }

    @media screen and (max-width: 750px) {
        #rightcont1 .tuijian .layui-tab-title {
            /*width: 50% !important;*/
        }

        #rightcont1 .tuijian ul > li {
            /*margin-bottom: 50px;*/
        }

        .yd-GZtitle {
            display: block;
            margin: 5px 0 5px 0;
            font-size: 13px;
            color: #333333;
        }

        .Tabtitle {
            width: 100%;
        }

        /*.Linheight{*/
        /*  display: block;*/
        /*line-height: 2px !important;*/
        /*margin-bottom: 0 !important;*/
        /*}*/
    }
</style>